<script setup>
import {ArrowDown, EditPen,Bottom} from "@element-plus/icons-vue";
import {onMounted, ref} from "vue";
import bus from '@/views/topology/lib/bus'
import {ElMessage} from "element-plus";

const circleUrl = "/favicon.ico";
const editDrop = ref();
const lineDrop = ref();
const unlock = ref(false);
const unlock2 = ref(false);
const lockState = ref(0);
const scale = ref(1);
// const userInfo = ref({});
const showMapStatus = ref(false);
const fileRef = ref();
// const drawLineStatus = ref(false);

onMounted(() => {
    bus.$on("fitViewComplete", (v) => {
        scale.value = v;
    })
})

// const loginSuccess = (e) => {
//     userInfo.value = e;
// }
// const login = () => {
// }
const unlockClick = () => {
    if (lockState.value===0||lockState.value===10&&unlock.value) {
        unlock.value = !unlock.value;
        if (unlock.value) {
            bus.$emit('onLocker');
            lockState.value = 10
        } else {
            bus.$emit('unLocker');
            lockState.value = 0
        }
    } else
        ElMessage.error("请先解锁画布");
}
const unlockClick2 = () => {
    if (lockState.value===0||lockState.value===2&&unlock2.value) {
        unlock2.value = !unlock2.value;
        if (unlock2.value) {
            bus.$emit('onLocker2')
            lockState.value = 2;
        } else {
            bus.$emit('unLocker')
            lockState.value = 0;
        }

    }else
        ElMessage.error("请先解锁画布");
}
const subScale = () => {
    scale.value = scale.value - 0.1;
    bus.$emit('scale', scale.value);
}
const addScale = () => {
    scale.value = scale.value + 0.1;
    bus.$emit('scale', scale.value);
}
const reScale = () => {
    //重置大小
    scale.value = 1.0
    bus.$emit('scale', 1);
}
const openFile = ()=>{
    fileRef.value.click();
}
const open = (e)=>{
    // console.log("打开咯")
    bus.$emit('open',e);
}
const fitView = () => {
    bus.$emit('fitView');
}
const undo = () => {
    bus.$emit('undo');
}
const redo = () => {
    bus.$emit('redo');
}
const cut = () => {
    bus.$emit('cut');
}
const copy = () => {
    bus.$emit('copy');
}
const paste = () => {
    bus.$emit('paste');
}
const updateLineType = (e) => {
    bus.$emit('updateLineType', e);
}
const save = () => {
    bus.$emit('saveTopology');
}
const download = () => {
    bus.$emit('download');
}
const saveCSV=()=>{
    bus.$emit('saveCSV');
}
const magnifier = () => {
    bus.$emit('toggleMagnifier');
}
const showMap = () => {
    showMapStatus.value = !showMapStatus.value;
    bus.$emit('showMap', showMapStatus.value);
}
// const drawLine = () => {
//     bus.$emit('drawLine');
// }
// const drawingPencil = () => {
//     bus.$emit('drawingPencil');
// }
const handleEditOpen = () => {
    editDrop.value.handleOpen()
}

const handleEditClose = () => {
    editDrop.value.handleClose()
}

const handleLineOpen = () => {
    lineDrop.value.handleOpen()
}

const handleLineClose = () => {
    lineDrop.value.handleClose()
}

</script>

<template>
    <div class="menu">
        <div>
            <a href="/"><el-avatar shape="square" :src="circleUrl" class="left-content" >Attack Web</el-avatar></a>
            <span class="left-content barLeft">
                <a @click="openFile">
                  <el-icon><FolderOpened /></el-icon>
                    <input ref="fileRef" type="file" hidden="hidden" @change="open"/>
                <div class="text">打开</div>
                </a>
            </span>
            <span class="left-content barLeft">
                <a @click="saveCSV">
                  <el-icon><Bottom/></el-icon>
                <div class="text">CSV</div>
                </a>
            </span>
            <span class="left-content barLeft">
                <a @click="save">
                  <div>
                    <i class="t-icon t-save"/>
                  </div>
                  <div class="text">JSON</div>
                </a>
            </span>
            <span class="left-content barLeft">
                <a @click="download">
                  <el-icon><Download/></el-icon>
                <div class="text">下载</div>
                </a>
            </span>
            <span class="left-content barLeft">
                <div>
                  <el-dropdown ref="editDrop">
                    <el-icon><EditPen/></el-icon>
                    <template #dropdown>
                      <el-dropdown-menu>
                        <el-dropdown-item><span @click="undo">撤销 ctrl+z</span></el-dropdown-item>
                        <el-dropdown-item><span @click="redo">恢复 ctrl+y</span></el-dropdown-item>
                        <el-dropdown-item><span @click="cut">剪切 ctrl+x</span></el-dropdown-item>
                        <el-dropdown-item><span @click="copy">复制 ctrl+c</span></el-dropdown-item>
                        <el-dropdown-item><span @click="paste">粘贴 ctrl+v</span></el-dropdown-item>
                      </el-dropdown-menu>
                    </template>
                  </el-dropdown>
                  <div class="text" @mouseover="handleEditOpen" @mouseout="handleEditClose">编辑</div>
                </div>
            </span>
            <span class="left-content"/>
            <span class="left-content"/>
            <span class="left-content"/>
            <span class="left-content"/>
            <span class="left-content"/>
            <span class="left-content"/>
            <span class="left-content"/>
            <span class="left-content"/>
            <span class="left-content"/>
            <span class="left-content"/>
            <span class="left-content"/>
            <span class="left-content"/>
            <span class="left-content"/>
        </div>
        <div>
            <span class="left-content" @click="unlockClick">
                <div>
                  <i :class="`t-icon ${unlock ? 't-lock warning' : 't-unlock'}`"/>
                </div>
                <div :class="`${unlock ? 'warning' : ''}`" class="text">{{ unlock ? "已锁定" : "已解锁" }}</div>
            </span>
                <span class="left-content" @click="unlockClick2">
                <div>
                  <i :class="`t-icon ${unlock2 ? 't-lock warning' : 't-unlock'}`"/>
                </div>
                <div :class="`${unlock2 ? 'warning' : ''}`" class="text">{{ unlock2 ? "已锁定(可触发)" : "已解锁(可触发)" }}</div>
            </span>
            <span class="left-content">
              <div>
                <el-dropdown>
                  <span class="el-dropdown-link">{{ (scale * 100).toFixed(0) }}
                    <el-icon class="el-icon--right">
                      <arrow-down/>
                    </el-icon>
                  </span>
                  <template #dropdown>
                    <el-dropdown-menu>
                      <div class="dropdown">
                        <span @click="subScale"><el-icon><ZoomOut/></el-icon></span>
                        <span @click="addScale"><el-icon><ZoomIn/></el-icon></span>
                        <span @click="fitView"> <el-button size="small">窗口大小</el-button></span>
                        <span @click="reScale"> <el-button size="small">重置</el-button></span>
                      </div>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
                <div class="text">视图</div>
              </div>
            </span>
            <span class="left-content">
        <div>
          <el-dropdown ref="lineDrop" @command="updateLineType">
            <span class="el-dropdown-link">
              <i class="t-icon t-icon t-curve"/>
              <el-icon class="el-icon--right">
                <arrow-down/>
              </el-icon>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command='curve'><span>曲线 <i
                        class="t-icon t-icon t-curve"/></span></el-dropdown-item>
                <el-dropdown-item command='polyline'><span>线段 <i
                        class="t-icon t-icon t-polyline"/></span></el-dropdown-item>
                <el-dropdown-item command='line'><span>直线 <i
                        class="t-icon t-icon t-line"/></span></el-dropdown-item>
                <el-dropdown-item command='mind'><span>脑图曲线 <i
                        class="t-icon t-icon t-mind"/></span></el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
            <div class="text" @mouseover="handleLineOpen" @mouseout="handleLineClose">连线</div>
        </div>
      </span>
            <span class="left-content">
        <span @click="magnifier">
          <i class="t-icon t-fangdajing"/>
          <div class="text">放大镜</div>
        </span>
      </span>
            <span class="left-content">
        <span @click="showMap">
          <i :class="`${showMapStatus ? 't-icon t-ditu warning' : 't-icon t-ditu'}`"/>
          <div class="text">缩略图</div>
        </span>
      </span>
        </div>
        <div class="barRight"/>
    </div>
</template>

<style scoped>
.menu {
    /*border-bottom: 1px #c0c0c0 solid;*/
    width: 100%;
    padding: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.menu > div {
    display: flex;
    justify-content: space-around;
    width: 100%;
}

.menu .barRight {
    display: flex;
    padding: 0px 20px;
    justify-content: flex-end;
}

.menu .barRight .demo-basic--circle {
    cursor: pointer;
}


.dropdown {
    width: 300px;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.dropdown .el-icon {
    font-size: 24px;
    cursor: pointer;
}

.menu .left-content {
    text-align: center;
    cursor: pointer;
}


.menu .text {
    font-size: 14px;
}
</style>